<template>
  <div>
    <el-form label-width="80px" @submit.prevent>
      <el-form-item label="通知内容">
        <el-input v-model="notifyContent" type="textarea" placeholder="请输入通知内容" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="sendNotify">发送通知</el-button>
      </el-form-item>
    </el-form>
    <el-divider>历史通知</el-divider>
    <el-timeline>
      <el-timeline-item
        v-for="item in sortedNotifyList"
        :key="item.id"
        :timestamp="item.time"
        placement="top"
      >{{ item.content }}</el-timeline-item>
    </el-timeline>
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
const notifyContent = ref('')
const notifyList = ref([
  { id: 1, time: '2024-05-01 10:00', content: '您的复诊时间为5月10日，请准时就诊。' },
  { id: 2, time: '2024-05-02 09:00', content: '体检报告已出，请登录系统查看。' }
])
const sortedNotifyList = computed(() => {
  // 按时间倒序（最新在前）
  return [...notifyList.value].sort((a, b) => new Date(b.time).getTime() - new Date(a.time).getTime())
})
function sendNotify() {
  if (!notifyContent.value) return
  notifyList.value.unshift({
    id: Date.now(),
    time: new Date().toLocaleString(),
    content: notifyContent.value
  })
  notifyContent.value = ''
}
</script> 